<template>
    <div>
        <mj-title type="h2" title="Dialog 弹层对话框"></mj-title>
        <div class="page-desc">适用于所有弹窗弹层、Alert提示、MessageBox弹框</div>

        <mj-title type="h5" title="插件引用"></mj-title>
        <mj-tabs class="mb50">
            <mj-tab-pane label="HTML" name="html">
              <div class="lh2">
        				<p>单行内容居中对齐 <a href="javascript:;" @click="click1">点击这里打开</a></p>
        				<p>多行内容自动左对齐 <a href="javascript:;" @click="click2">点击这里打开</a></p>
        				<p>成功提示 <a href="javascript:;" @click="click3">点击这里打开</a></p>
        				<p>失败提示 <a href="javascript:;" @click="click4">点击这里打开</a></p>
        				<p>警告提示 <a href="javascript:;" @click="click5">点击这里打开</a></p>
              </div>
       				<mj-divider>插件引用</mj-divider>
       				<div class="mj-desc">直接在页面使用<code>this.$dialog({...})</code>，相当于Alert类提示弹窗</div>
            </mj-tab-pane>
            <mj-tab-pane label="CODE" name="code">
              <pre>
                <code class="language-html line-numbers">
                &lt;template>
                  &lt;p>单行内容居中对齐 &lt;a href="javascript:;" @click="click1">点击这里打开&lt;/a>&lt;/p>
                  &lt;p>多行内容自动左对齐 &lt;a href="javascript:;" @click="click2">点击这里打开&lt;/a>&lt;/p>
                  &lt;p>成功提示 &lt;a href="javascript:;" @click="click3">点击这里打开&lt;/a>&lt;/p>
                  &lt;p>失败提示 &lt;a href="javascript:;" @click="click4">点击这里打开&lt;/a>&lt;/p>
                  &lt;p>警告提示 &lt;a href="javascript:;" @click="click5">点击这里打开&lt;/a>&lt;/p>
                &lt;/template>
                &lt;script>
                export default {
                  data(){
                    return {
                    }
                  },
                  methods:{
                    click1(){
                      this.$dialog(
                        {title:'标题',
                          content:'内容默认居中对齐',
                          confirm:'确定'
                        }
                      )
                    },
                    click2(){
                      this.$dialog(
                        {title:'标题',
                          width:250,
                          content:'多行内容自动左对齐。仅支持纯文本内容',
                          confirm:'确定'
                        }
                      )
                    },
                    click3(){
                      this.$dialog(
                        {title:'恭喜您中奖了',
                          content:'成功啦',
                          confirm:'确定',
                          icon:1
                        }
                      )
                    },
                    click4(){
                      this.$dialog(
                        {title:'失败提示',
                          content:'很抱歉，你与大奖擦肩而过',
                          confirm:'确定',
                          icon:2
                        }
                      )
                    },
                    click5(){
                      this.$dialog(
                        {title:'警告',
                          content:'还是要按照规范来操作',
                          confirm:'确定',
                          icon:3,
                          animation:'rotate'
                        }
                      )
                    }
                  }
                }
                &lt;/script>
                </code>
              </pre>
            </mj-tab-pane>
        </mj-tabs>

        <mj-title type="h5" title="基本用法"></mj-title>
        <mj-tabs class="mb50">
            <mj-tab-pane label="HTML" name="html">
            	<mj-button @click="visible1=true">使用参数visible显示隐藏</mj-button>
            	<mj-button @click="$refs.openDialog.open()">使用组件open方法打开</mj-button>
			    <mj-dialog title="title" v-model="visible1" :closeModal='false'>
			       <p>窗口内容，可包含任何内容</p>
			       <p>就是样式丑了点点</p>
			    </mj-dialog>
			    <mj-dialog title="title" ref="openDialog" class="test-dialog">窗口内容，可包含任何内容

          </mj-dialog>
			    <ul class="page-list">
			    	<li>可通过两种方式弹出或隐藏窗口</li>
			    </ul>
            </mj-tab-pane>
            <mj-tab-pane label="CODE" name="code">
<pre>
<code class="language-html line-numbers">
&lt;template>
  &lt;div>
	&lt;mj-button @click="visible1=true">使用参数visible显示隐藏&lt;/mj-button>
	&lt;mj-button @click="$refs.openDialog.open()">使用组件open方法打开&lt;/mj-button>
    &lt;mj-dialog title="title" v-model="visible1">
       &lt;p>窗口内容，可包含任何内容&lt;/p>
       &lt;p>就是样式丑了点点&lt;/p>
    &lt;/mj-dialog>
    &lt;mj-dialog title="title" ref="openDialog" class="test-dialog">窗口内容，可包含任何内容&lt;/mj-dialog>
  &lt;/div>
&lt;/template>
&lt;script>
export default {
  data () {
    return {
      visible1: false
    }
  }
}
&lt;/script>
</code>
</pre>
            </mj-tab-pane>
        </mj-tabs>

        <mj-title type="h5" title="标题设置"></mj-title>
        <mj-tabs class="mb50">
            <mj-tab-pane label="HTML" name="html">
            	<mj-button @click="visible3=true">slot设置的标题</mj-button>
				<mj-dialog v-model="visible3">
					<div slot="title">通过slot设标题</div>
					<p>这是一个通过slot设标题的 dialog 弹窗，当然也可以是不设置标题</p>
					<p>这是一个通过slot设标题的 dialog 弹窗</p>
					<p>这是一个通过slot设标题的 dialog 弹窗</p>
					<p>这是一个通过slot设标题的 dialog 弹窗</p>
				</mj-dialog>
            </mj-tab-pane>
            <mj-tab-pane label="CODE" name="code">
<pre>
<code class="language-html line-numbers">
&lt;template>
&lt;mj-button @click="visible3=true">slot设置的标题&lt;/mj-button>
&lt;mj-dialog v-model="visible3">
	&lt;div slot="title">通过slot设标题&lt;/div>
	&lt;p>这是一个通过slot设标题的 dialog 弹窗，当然也可以是不设置标题&lt;/p>
	&lt;p>这是一个通过slot设标题的 dialog 弹窗&lt;/p>
	&lt;p>这是一个通过slot设标题的 dialog 弹窗&lt;/p>
	&lt;p>这是一个通过slot设标题的 dialog 弹窗&lt;/p>
&lt;/mj-dialog>
&lt;/template>
&lt;script>
export default {
  data () {
    return {
      visible2: false,
      visible3: false
    }
  }
}
&lt;/script>
</code>
</pre>
            </mj-tab-pane>
        </mj-tabs>

        <mj-title type="h5" title="设定宽高"></mj-title>
        <mj-tabs class="mb50">
            <mj-tab-pane label="HTML" name="html">
			    <mj-button @click="visible4=true">设定宽高</mj-button>
			    <mj-dialog v-model="visible4" title="title" :width="400" :height="200">
			      <p>设置了宽高的 dialog 弹窗，设定了高时，内容溢出将显示纵向滚动条</p>
			      <p style="height: 200px"></p>
			      <p>设置了宽高的 dialog 弹窗，设定了高时，内容溢出将显示纵向滚动条</p>
			    </mj-dialog>
            </mj-tab-pane>
            <mj-tab-pane label="CODE" name="code">
<pre>
<code class="language-html line-numbers">
&lt;template>
  &lt;div>
    &lt;mj-button @click="visible4=true">设定宽高&lt;/mj-button>
    &lt;mj-dialog v-model="visible4" title="title" :width="400" :height="200">
      &lt;p>设置了宽高的 dialog 弹窗，设定了高时，内容溢出将显示纵向滚动条&lt;/p>
      &lt;p style="height: 200px">&lt;/p>
      &lt;p>设置了宽高的 dialog 弹窗，设定了高时，内容溢出将显示纵向滚动条&lt;/p>
    &lt;/mj-dialog>
  &lt;/div>
&lt;/template>
&lt;script>
export default {
  data () {
    return {
      visible4: false
    }
  }
}
&lt;/script>
</code>
</pre>
            </mj-tab-pane>
        </mj-tabs>

        <mj-title type="h5" title="添加按钮"></mj-title>
        <mj-tabs class="mb50">
            <mj-tab-pane label="HTML" name="html">
			    <mj-button @click="visible5=true">添加按钮</mj-button>
			    <mj-dialog v-model="visible5" title="title" confirm="confirm" cancel="cancel">
			      <p>这是按钮的 dialog 弹窗内容</p>
			      <p>默认情况下点击按钮后将关闭窗口</p>
			    </mj-dialog>
            </mj-tab-pane>
            <mj-tab-pane label="CODE" name="code">
              <pre>
              <code class="language-html line-numbers">
              &lt;template>
                &lt;div>
                  &lt;mj-button @click="visible5=true">添加按钮&lt;/mj-button>
                  &lt;mj-dialog v-model="visible5" title="title" confirm="confirm" cancel="cancel">
                    &lt;p>这是按钮的 dialog 弹窗内容&lt;/p>
                    &lt;p>默认情况下点击按钮后将关闭窗口&lt;/p>
                  &lt;/mj-dialog>
                &lt;/div>
              &lt;/template>
              &lt;script>
              export default {
                data () {
                  return {
                    visible5: false
                  }
                }
              }
              &lt;/script>
              </code>
              </pre>
            </mj-tab-pane>
        </mj-tabs>

        <mj-title type="h5" title="事件"></mj-title>
        <mj-tabs class="mb50">
            <mj-tab-pane label="HTML" name="html">
			    <mj-button @click="visible6=true" class="green">事件</mj-button>
			    <mj-dialog v-model="visible6" confirm="confirm" cancel="cancel" @beforeClose="beforeClose">
			      <p>添加了beforeClose事件后，将阻止窗口关闭，转由手动关闭</p>
			      <p></p>
			    </mj-dialog>
            </mj-tab-pane>
            <mj-tab-pane label="CODE" name="code">
<pre>
<code class="language-html line-numbers">
&lt;template>
  &lt;div>
    &lt;mj-button @click="visible6=true" class="green">事件&lt;/mj-button>
    &lt;mj-dialog v-model="visible6" confirm="confirm" cancel="cancel" @beforeClose="beforeClose">
      &lt;p>添加了beforeClose事件后，将阻止窗口关闭，转由手动关闭&lt;/p>
      &lt;p>&lt;/p>
    &lt;/mj-dialog>
  &lt;/div>
&lt;/template>
&lt;script>
export default {
  data () {
    return {
      visible6: false
    }
  },
  methods: {
    beforeClose (type, done) {
      if (type === 'confirm') {
        done()
        this.$dialog({
          title: '确认事件',
          content: '您点击了确认按钮',
          autoClose: 3
        })
      } else {
        alert('你点击了' + type)
        done()
      }
    }
  }
}
&lt;/script>
</code>
</pre>
            </mj-tab-pane>
        </mj-tabs>

        <mj-title type="h5" title="可自动关闭"></mj-title>
        <mj-tabs class="mb50">
            <mj-tab-pane label="HTML" name="html">
			    <mj-button @click="visible7=true">可自动关闭</mj-button>
			    <mj-dialog v-model="visible7" title="title" :autoClose="10">
			      <p>10秒后将自动关闭，如果需要显示倒计时间，可通过添加窗口样式，将隐藏的倒计时显示出来</p>
			      <p>这是的 dialog 弹窗内容</p>
			      <p>这是一个会自动关闭的弹窗</p>
			    </mj-dialog>
            </mj-tab-pane>
            <mj-tab-pane label="CODE" name="code">
<pre>
<code class="language-html line-numbers">
&lt;template>
  &lt;div>
    &lt;mj-button @click="visible7=true">可自动关闭&lt;/mj-button>
    &lt;mj-dialog v-model="visible7" title="title" :autoClose="10">
      &lt;p>10秒后将自动关闭，如果需要显示倒计时间，可通过添加窗口样式，将隐藏的倒计时显示出来&lt;/p>
      &lt;p>这是的 dialog 弹窗内容&lt;/p>
      &lt;p>这是一个会自动关闭的弹窗&lt;/p>
    &lt;/mj-dialog>
  &lt;/div>
&lt;/template>
&lt;script>
export default {
  data () {
    return {
      visible7: false
    }
  }
}
&lt;/script>
</code>
</pre>
            </mj-tab-pane>
        </mj-tabs>

        <mj-title type="h5" title="可自定过渡动画"></mj-title>
        <mj-tabs class="mb50">
            <mj-tab-pane label="HTML" name="html">
			    <p class="mb15">目前设置有如下过渡动画效果，试着点击看看效果：</p>
			    <mj-button @click="clickAnimation('zoom')">zoom</mj-button>
			    <mj-button @click="clickAnimation('flip')">flip</mj-button>
			    <mj-button @click="clickAnimation('door')">door</mj-button>
			    <mj-button @click="clickAnimation('rotate')">rotate</mj-button>
			    <mj-button @click="clickAnimation('slideDown')">slideDown</mj-button>
			    <mj-button @click="clickAnimation('slideUp')">slideUp</mj-button>
			    <mj-button @click="clickAnimation('slideLeft')">slideLeft</mj-button>
			    <mj-button @click="clickAnimation('slideRight')">slideRight</mj-button>
			    <mj-button @click="clickAnimation('val')">val</mj-button>
			    <mj-button @click="clickAnimation('donna')">donna</mj-button>
			    <mj-button @click="clickAnimation('ricky')">ricky</mj-button>
			    <mj-dialog v-model="visible8" title="title" :animation="animation">
			      <p>这是的 dialog 弹窗内容</p>
			      <p></p>
			    </mj-dialog>
			    <ul class="page-list">
			    	<li>可通过设置不同的过渡动画，其它动画需要要样式中先定义。</li>
			    	<li>默认animation="zoom"，然后通过css样式.zoom-enter-active{}、.zoom-leave-active{}写不同的动画效果即可</li>
			    </ul>
            </mj-tab-pane>
            <mj-tab-pane label="CODE" name="code">
<pre>
<code class="language-html line-numbers">
&lt;template>
  &lt;div>
    &lt;p>目前设置有如下过渡动画效果，试着点击看看效果：&lt;/p>
    &lt;mj-button @click="clickAnimation('zoom')">zoom&lt;/mj-button>
    &lt;mj-button @click="clickAnimation('flip')">flip&lt;/mj-button>
    &lt;mj-button @click="clickAnimation('door')">door&lt;/mj-button>
    &lt;mj-button @click="clickAnimation('rotate')">rotate&lt;/mj-button>
    &lt;mj-button @click="clickAnimation('slideDown')">slideDown&lt;/mj-button>
    &lt;mj-button @click="clickAnimation('slideUp')">slideUp&lt;/mj-button>
    &lt;mj-button @click="clickAnimation('slideLeft')">slideLeft&lt;/mj-button>
    &lt;mj-button @click="clickAnimation('slideRight')">slideRight&lt;/mj-button>
    &lt;mj-button @click="clickAnimation('val')">val&lt;/mj-button>
    &lt;mj-button @click="clickAnimation('donna')">donna&lt;/mj-button>
    &lt;mj-button @click="clickAnimation('ricky')">ricky&lt;/mj-button>
    &lt;mj-dialog v-model="visible8" title="title" :animation="animation">
      &lt;p>这是的 dialog 弹窗内容&lt;/p>
      &lt;p>&lt;/p>
    &lt;/mj-dialog>
  &lt;/div>
&lt;/template>
&lt;script>
export default {
  data () {
    return {
      visible8: false,
      animation: 'zoom'
    }
  },
  methods: {
    clickAnimation (an) {
      this.visible8 = true
      this.animation = an
    }
  }
}
&lt;/script>
</code>
</pre>
            </mj-tab-pane>
        </mj-tabs>

        <mj-title type="h5" title="可自定显示位置"></mj-title>
        <mj-tabs class="mb50">
            <mj-tab-pane label="HTML" name="html">
			    <mj-button @click="visible9=true" class="green">试一试</mj-button>
			    <mj-dialog v-model="visible9" :center="false" class="right-bottom" :modal="false" animation="slideUp">
			      <p>这是的 dialog 弹窗内容</p>
			      <p></p>
			    </mj-dialog>
			    <ul class="page-list">
			    	<li>为满足各种不同的使用场景，可自定弹窗显示位置。首先通过<code>:center="false"</code>设为不居中对齐，然后再添加不同的样式实现。这里演示一个右下角出现的弹窗。</li>
			    </ul>
            </mj-tab-pane>
            <mj-tab-pane label="CODE" name="code">
<pre>
<code class="language-html line-numbers">
&lt;template>
  &lt;div>
    &lt;span @click="visible9=true" class="green">试一试&lt;/span>
    &lt;mj-dialog v-model="visible9" :center="false" class="right-bottom" :modal="false" animation="slideUp">
      &lt;p>这是的 dialog 弹窗内容&lt;/p>
      &lt;p>&lt;/p>
    &lt;/mj-dialog>
  &lt;/div>
&lt;/template>
&lt;script>
export default {
  data () {
    return {
      visible9: false
    }
  }
}
&lt;/script>
&lt;style>
  .right-bottom{right: 0;bottom: 0;width: 300px;height: 150px}
&lt;/style>
</code>
</pre>
            </mj-tab-pane>
        </mj-tabs>

        <mj-title type="h5" title="嵌套弹窗"></mj-title>
        <mj-tabs class="mb50">
            <mj-tab-pane label="HTML" name="html">
			    <mj-button @click="visible10=true" class="green">试一试</mj-button>
			    <mj-dialog v-model="visible10" title="title" :close-on-press-escape="false">
			      <p>这是的 dialog 弹窗内容</p>
			      <p>&nbsp;</p>
			      <p @click="visible11=true"><a href="javascript:;" class="green">点击这里打开内层弹窗口</a></p>
			      <p>&nbsp;</p>
			      <p>这是的 dialog 弹窗内容</p>
			      <p></p>
			    </mj-dialog>
			    <mj-dialog v-model="visible11" title="title">内层弹窗</mj-dialog>
            </mj-tab-pane>
            <mj-tab-pane label="CODE" name="code">
<pre>
<code class="language-html line-numbers">
&lt;template>
  &lt;div>
    &lt;span @click="visible10=true" class="green">试一试&lt;/span>
    &lt;mj-dialog v-model="visible10" title="title">
      &lt;p>这是的 dialog 弹窗内容&lt;/p>
      &lt;p>&nbsp;&lt;/p>
      &lt;p @click="visible11=true">&lt;a href="javascript:;" class="green">点击这里打开内层弹窗口&lt;/a>&lt;/p>
      &lt;p>&nbsp;&lt;/p>
      &lt;p>这是的 dialog 弹窗内容&lt;/p>
      &lt;p>&lt;/p>
    &lt;/mj-dialog>
    &lt;mj-dialog v-model="visible11" title="title">内层弹窗&lt;/mj-dialog>
  &lt;/div>
&lt;/template>
&lt;script>
export default {
  data () {
    return {
      visible10: false,
      visible11: false
    }
  }
}
&lt;/script>
</code>
</pre>
            </mj-tab-pane>
        </mj-tabs>

        <mj-title type="h5" title="窗口改变时自动定位"></mj-title>
        <mj-tabs class="mb50">
            <mj-tab-pane label="HTML" name="html">
			    <mj-button @click="visible12=true">试一试</mj-button>
			    <mj-dialog v-model="visible12" title="title" ref="autoTop">
			      <p @click="setPosition" :style="{height:autoHeight}">
			      	<mj-button href="javascript:;">改变当前窗口高</mj-button>
			      </p>
			      <p>这是的 dialog 弹窗内容</p>
			      <p></p>
			    </mj-dialog>
            	<ul class="page-list">
            		<li>适用于窗口展开收起事件，导致窗口高度发生变化时，用于修正窗口的位置</li>
            	</ul>
            </mj-tab-pane>
            <mj-tab-pane label="CODE" name="code">
<pre>
<code class="language-html line-numbers">
&lt;template>
  &lt;div>
    &lt;mj-button @click="visible12=true">试一试&lt;/mj-button>
    &lt;mj-dialog v-model="visible12" title="title" ref="autoTop">
      &lt;p @click="setPosition" :style="{height:autoHeight}">
      &lt;mj-button href="javascript:;">改变当前窗口高&lt;/mj-button>
      &lt;/p>
      &lt;p>这是的 dialog 弹窗内容&lt;/p>
      &lt;p>&lt;/p>
    &lt;/mj-dialog>
  &lt;/div>
&lt;/template>
&lt;script>
export default {
  data () {
    return {
      visible12: false,
      autoHeight:''
    }
  },
  methods:{
    setPosition (){
      this.autoHeight='600px'
      this.$refs.autoTop.setPosition()
    }
  }
}
&lt;/script>
</code>
</pre>
            </mj-tab-pane>
        </mj-tabs>

        <mj-title type="h5" title="使用<code>slot='footer'自定义尾部</code>"></mj-title>
        <mj-tabs class="mb50">
            <mj-tab-pane label="HTML" name="html">
			    <mj-button @click="visible13=true">试一试</mj-button>
			    <mj-dialog v-model="visible13" title="title">
			      <p>这是的 dialog 弹窗内容</p>
			      <p></p>
			      <div slot="footer" style="text-align:center;margin-bottom:15px;">
			       <mj-button>取消</mj-button>
			       <mj-button type="primary">确定</mj-button>
			       <mj-button type="primary">提交</mj-button>
			      </div>
			    </mj-dialog>
            </mj-tab-pane>
            <mj-tab-pane label="CODE" name="code">
<pre>
<code class="language-html line-numbers">
&lt;template>
&lt;mj-button @click="visible13=true">试一试&lt;/mj-button>
&lt;mj-dialog v-model="visible13" title="title">
  &lt;p>这是的 dialog 弹窗内容&lt;/p>
  &lt;p>&lt;/p>
  &lt;div slot="footer">
   &lt;mj-button>取消&lt;/mj-button>
   &lt;mj-button>确定&lt;/mj-button>
   &lt;mj-button>提交&lt;/mj-button>
  &lt;/div>
&lt;/mj-dialog>
&lt;/template>
&lt;script>
export default {
  data () {
    return {
      visible13: false
    }
  },
  methods:{
  
  }
}
&lt;/script>
</code>
</pre>
            </mj-tab-pane>
        </mj-tabs>

        <mj-title type="h5" title="全屏模式"></mj-title>
        <mj-tabs class="mb50">
            <mj-tab-pane label="HTML" name="html">
			    <mj-button @click="visible14=true">试一试</mj-button>
			    <mj-dialog v-model="visible14" title="全屏模式弹窗口" :fullScreen="true">
			      <p>这是的 dialog 弹窗内容</p>
			    </mj-dialog>
            </mj-tab-pane>
            <mj-tab-pane label="CODE" name="code">
<pre>
<code class="language-html line-numbers">
&lt;template>
  &lt;div>
    &lt;mj-button @click="visible14=true">试一试&lt;/mj-button>
    &lt;mj-dialog v-model="visible14" title="全屏模式弹窗口" :fullScreen="true">
      &lt;p>这是的 dialog 弹窗内容&lt;/p>
    &lt;/mj-dialog>
  &lt;/div>
&lt;/template>
&lt;script>
export default {
  data () {
    return {
      visible14: false
    }
  },
}
&lt;/script>
</code>
</pre>
            </mj-tab-pane>
        </mj-tabs>

        <mj-title type="h5" title="显示最大最小化弹窗"></mj-title>
        <mj-tabs class="mb50">
            <mj-tab-pane label="HTML" name="html">
			    <mj-button @click="visible15=true" class="green">试一试</mj-button>
			    <mj-dialog v-model="visible15" title="最大最小化弹窗" :showScreen="true">
			      <p>这是的 dialog 弹窗内容</p>
			    </mj-dialog>
            </mj-tab-pane>
            <mj-tab-pane label="CODE" name="code">
<pre>
<code class="language-html line-numbers">
&lt;template>
  &lt;div>
    &lt;mj-button @click="visible15=true">试一试&lt;/mj-button>
    &lt;mj-dialog v-model="visible15" title="最大最小化弹窗" :showScreen="true">
      &lt;p>这是的 dialog 弹窗内容&lt;/p>
    &lt;/mj-dialog>
  &lt;/div>
&lt;/template>
&lt;script>
export default {
  data () {
    return {
      visible15: false
    }
  },
}
&lt;/script>
</code>
</pre>
            </mj-tab-pane>
        </mj-tabs>

        <mj-title type="h5" title="API"></mj-title>
        <mj-title type="h6" title="Dialog 参数"></mj-title>
		<table class="api-table">
		  <thead>
		    <tr>
		      <th>参数</th>
		      <th>说明</th>
		      <th>类型</th>
		      <th>默认值</th>
		    </tr>
		  </thead>
		  <tbody>
		    <tr>
		      <td>value</td>
		      <td>v-model形式，是否显示 Dialog</td>
		      <td>boolean</td>
		      <td>false</td>
		    </tr>
		    <tr>
		      <td>title</td>
		      <td>Dialog 的标题，也可通过具名 slot 传入</td>
		      <td>string</td>
		      <td>-</td>
		    </tr>
		    <tr>
		      <td>content</td>
		      <td>
		        Dialog
		        的内容。通过参数传进content时，则不显示slot。在组件引用模式建议使用slot形式填充内容。仅支持纯文本内容
		      </td>
		      <td>null</td>
		      <td>-</td>
		    </tr>
		    <tr>
		      <td>width</td>
		      <td>Dialog 的宽度，单位px，建议通过css设置</td>
		      <td>number</td>
		      <td>-</td>
		    </tr>
		    <tr>
		      <td>height</td>
		      <td>Dialog 的高度，溢出时显示滚动条，一般情况下不需要设置</td>
		      <td>number</td>
		      <td>-</td>
		    </tr>
		    <tr>
		      <td>class</td>
		      <td>原生class，通过添加样式控制窗口大小等等</td>
		      <td>string</td>
		      <td>-</td>
		    </tr>
		    <tr>
		      <td>confirm</td>
		      <td>确认按钮，点击默认关闭窗口</td>
		      <td>string</td>
		      <td>-</td>
		    </tr>
		    <tr>
		      <td>cancel</td>
		      <td>取消按钮，点击默认关闭窗口</td>
		      <td>string</td>
		      <td>-</td>
		    </tr>
<!-- 		    <tr>
		      <td>callback</td>
		      <td>
		        确定回调比较常用而添加，同beforeClose，相当于type=confirm，减少对type的判断。根据需求和beforeClose二选一使用
		      </td>
		      <td>function</td>
		      <td>-</td>
		    </tr> -->
		    <tr>
		      <td>modal</td>
		      <td>是否需要遮罩层</td>
		      <td>boolean</td>
		      <td>true</td>
		    </tr>
		    <tr>
		      <td>closeModal</td>
		      <td>是否可以通过点击 modal 关闭 Dialog</td>
		      <td>boolean</td>
          <td>true</td>
		    </tr>
		    <tr>
		      <td>appendToBody</td>
		      <td>Dialog 自身是否插入至 body 元素上</td>
		      <td>boolean</td>
		      <td>true</td>
		    </tr>
		    <tr>
		      <td>lockScroll</td>
		      <td>是否在 Dialog 出现时将 body 滚动锁定</td>
		      <td>boolean</td>
		      <td>true</td>
		    </tr>
		    <tr>
		      <td>showClose</td>
		      <td>是否显示关闭按钮，点击默认关闭窗口</td>
		      <td>boolean</td>
		      <td>true</td>
		    </tr>
		    <tr>
		      <td>move</td>
		      <td>允许拖动窗口</td>
		      <td>boolean</td>
		      <td>true</td>
		    </tr>
		    <tr>
		      <td>autoClose</td>
		      <td>自动关闭时间，单位秒。0为不自动关闭</td>
		      <td>number</td>
		      <td>0</td>
		    </tr>
		    <tr>
		      <td>animation</td>
		      <td>
		        动画样式名，可选zoom、flip、door、rotate、slideDown、slideUp、slideLeft、slideRight
		      </td>
		      <td>string</td>
		      <td>-</td>
		    </tr>
		    <tr>
		      <td>after</td>
		      <td>窗口加载完回调</td>
		      <td>function</td>
		      <td>-</td>
		    </tr>
		    <tr>
		      <td>center</td>
		      <td>居中对齐，false时需通过添加样式控制窗口位置</td>
		      <td>boolean</td>
		      <td>true</td>
		    </tr>
		    <tr>
		      <td>icon</td>
		      <td>
		        仅在this.$dialog下有效，用于展示常见的alert提示显示对应的icon图标，1成功，2失败，3提示，4警告。其它的可通过添加样式控制
		      </td>
		      <td>number</td>
		      <td>0</td>
		    </tr>
		    <tr>
		      <td>zIndex</td>
		      <td>弹层的z-index样式</td>
		      <td>number</td>
		      <td>-</td>
		    </tr>
		    <tr>
		      <td>fullScreen</td>
		      <td>是否全屏弹层</td>
		      <td>boolean</td>
		      <td>false</td>
		    </tr>
		    <tr>
		      <td>showScreen</td>
		      <td>是否显示最大最小化按钮</td>
		      <td>boolean</td>
		      <td>false</td>
		    </tr>
        <tr>
          <td>className</td>
          <td>添加自定义class名称</td>
          <td>String</td>
          <td>-</td>
        </tr>
        <tr>
          <td>close-on-press-escape</td>
          <td>是否可以通过按下 ESC 关闭 Dialog</td>
          <td>boolean</td>
          <td>true</td>
        </tr>
		  </tbody>
		</table>

        <mj-title type="h6" title="Dialog 事件"></mj-title>
        <table class="api-table">
            <thead>
                <tr>
                    <th>事件名</th>
                    <th>说明</th>
                    <th>返回值</th>
                </tr>
            </thead>
            <tbody>
              <tr>
                <td>beforeClose</td>
                <td>
                  关闭前的回调，会暂停 Dialog
                  的关闭。function(type,done),type=close/confirm/cancel
                  表示点了哪里关闭，done 用于关闭 Dialog
                </td>
                <td>function</td>
              </tr>
                <tr>
                	<td>open</td>
                	<td>打开窗口，使用此方法打开时不支持v-model双向绑定</td>
                	<td></td>
                </tr>
                <tr>
                  <td>opened</td>
                  <td>Dialog打开之后回调</td>
                  <td></td>
                </tr>
                <tr>
                  <td>close</td>
                  <td>关闭窗口</td>
                  <td></td>
                </tr>
                <tr>
                  <td>setPosition</td>
                  <td>设置窗口top位置，适用于窗口展开收起事件，导致窗口高度发生变化时，用于修正窗口的位置</td>
                  <td></td>
                </tr>
            </tbody>
        </table>

    </div>
</template>

<script>
    export default {
        data () {
            return {
				visible1: false,
				visible2: false,
				visible3: false,
				visible4: false,
				visible5: false,
				visible6: false,
				visible7: false,
				visible8: false,
				visible9: false,
				visible10: false,
				visible11: false,
				visible12: false,
				visible13: false,
				visible14: false,
				visible15: false,
				animation: 'zoom',
				autoHeight: ''
            }
        },
        methods: {
			click1 () {
			  this.$dialog(
			    {title: '标题',
			      content: '内容默认居中对齐',
			      confirm: '确定'
			    }
			  )
			},
			click2 () {
			  this.$dialog(
			    {title: '标题',
			      width: 250,
			      content: '多行内容自动左对齐。仅支持纯文本内容',
			      confirm: '确定'
			    }
			  )
			},
			click3 () {
			  this.$dialog(
			    {title: '恭喜您中奖了',
			      content: '成功啦',
			      confirm: '确定',
			      icon: 1
			    }
			  )
			},
			click4 () {
			  this.$dialog(
			    {title: '失败提示',
			      content: '很抱歉，你与大奖擦肩而过',
			      confirm: '确定',
			      icon: 2
			    }
			  )
			},
			click5 () {
			  this.$dialog(
			    {title: '警告',
			      content: '还是要按照规范来操作',
			      confirm: '确定',
			      icon: 3,
			      animation: 'rotate'
			    }
			  )
			},
			beforeClose (type, done) {
			  if (type === 'confirm') {
			    done()
			    this.$dialog({
			      title: '确认事件',
			      content: '您点击了确认按钮',
			      autoClose: 3
			    })
			  } else {
			    alert('你点击了' + type)
			    done()
			  }
			},

			clickAnimation (an) {
			  this.visible8 = true
			  this.animation = an
			},
			setPosition (){
			  this.autoHeight='600px'
			  this.$refs.autoTop.setPosition()
			}
        },
    }
</script>

<style>
.page-list {margin-top: 10px;}
.right-bottom{right: 0;bottom: 0;width: 300px;height: 150px}
</style>